<template>
  <div class="entering">
    <a-card
      :bordered="false"
      style="border-radius:8px;margin-top:10px;"
      :bodyStyle="{ padding: 0 }">
      <div class="enterbox">
        <div v-if="!ischeck" class="mainsearchbox flex row_center flex_wrap">
          <div class="topsearch bold">请校验商品：</div>
          <div style="width:100%;margin-bottom: 13px">
            <a-input v-model="searchipt" placeholder="请粘贴商品链接进行审核" style="height: 43px;border-radius: 4px;"/>
          </div>
          <a-button
            type="primary"
            :disabled="btnloading"
            style="width: 100%;height: 43px;border-radius: 4px;"
            @click="dogoodstesting">
            <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
            {{ btnloading===true?'校验中...':'校验商品' }}
          </a-button>
          <div class="tips">
            <div style="color: #2396F9;padding-bottom: 18px;">重要提醒：</div>
            <div> 1、同一商品请勿重复提交！</div>
            <div> 2、仅支持提交服务费率8%以上的商品！</div>
            <div> 3、请确保已经和商家对接清楚，切勿中途调整价格和佣金！</div>
            <div> 4、若中途商品有变化，请及时在线修改或者下架商品！</div>
          </div>
        </div>
        <div v-else class="enterform">
          <div class="formbox">
            <div class="cartitle">
              礼金录入
            </div>
            <a-form-model
              ref="ruleForm"
              :model="form"
              :rules="rules"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-form-model-item label="商品原标题 ：">
                <div style="color: #2396F9;"><a :href="form.pro_url" target="_blank" rel="noopener noreferrer"> {{
                  form.pro_title }}</a></div>
              </a-form-model-item>
              <a-form-model-item ref="pro_price" label="原价：" prop="pro_price">
                <a-input
                  v-model="form.pro_price"
                  placeholder="例：35.6"
                  style="width: 126px;height: 30px;"
                  suffix="元"
                  @blur="
                    () => {
                      $refs.pro_price.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item ref="pro_exten" label="商品短标题：" prop="pro_exten">
                <a-input
                  v-model="form.pro_exten"
                  placeholder="例：品牌+品名+样式+规格等，清楚描述商品，12字内"
                  style="max-width: 436px;height: 30px;border-radius: 4px;"
                  @blur="
                    () => {
                      $refs.pro_exten.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item label="商品分类：" prop="region">
                <a-select v-model="form.pro_class" placeholder="请选择分类" class="br4" style="width: 127px;height: 30px;">
                  <a-select-option :value="v.title" v-for="(v,k) in classlist" :key="k">
                    {{ v.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item ref="pro_img" label="商品主图：" prop="pro_img">
                <div class="flex m_b_10">
                  <a-input
                    v-model="form.pro_img"
                    placeholder="请填写淘宝空间主图地址"
                    style="max-width: 436px;height: 30px;border-radius: 4px;"
                    @blur="
                      () => {
                        $refs.pro_img.onFieldBlur();
                      }
                    "
                  />
                  <div class="showimg">
                    <a-upload
                      name="file"
                      action="https://app.letuilm.com/api/upload"
                      list-type="picture-card"
                      :multiple="false"
                      :show-upload-list="false"
                      :before-upload="beforeUpload"
                      @change="handleChange2">
                      <div class="nogoodsimg">
                        <a-button type="link">
                          上传图片
                        </a-button>
                      </div>
                    </a-upload>
                  </div>
                </div>
                <div v-if="form.pro_img!==''" class="yxtu" style="width: 126px;height: 122px;">
                  <img :src="form.pro_img" alt="" style="width: 121px;height: 117px;">
                  <a-icon type="close-circle" class="romoveimg" @click="closeimg"/>
                </div>
              </a-form-model-item>
              <a-form-model-item ref="pro_couponUrl" label="优惠券链接：" prop="pro_couponUrl">
                <a-space size="large">
                  <a-input
                    v-model="form.pro_couponUrl"
                    placeholder="填写同店铺优惠券链接"
                    style="max-width: 558px;height: 30px;border-radius: 4px;"
                    @blur="docheckcoupon"
                  />
                  <a-date-picker
                    v-model="endValue"
                    show-time
                    format="YYYY-MM-DD"
                    placeholder="结束时间"
                  />
                </a-space>
              </a-form-model-item>
              <a-form-model-item ref="pro_couponShold" label="满多少使用：" prop="pro_couponShold">
                <a-input
                  v-model="form.pro_couponShold"
                  placeholder="金额"
                  style="width: 126px;height: 30px;"
                  suffix="元"
                  @blur="
                    () => {
                      $refs.pro_couponShold.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item ref="pro_couponSingle" label="券面值：" prop="pro_couponSingle">
                <a-input
                  v-model="form.pro_couponSingle"
                  placeholder="例：9.9"
                  style="width: 126px;height: 30px;"
                  suffix="元"
                  @blur="
                    () => {
                      $refs.pro_couponSingle.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item ref="pro_couponNum" label="优惠券总量：" prop="pro_couponNum">
                <a-input
                  v-model="form.pro_couponNum"
                  placeholder="例：10000"
                  style="width: 126px;height: 30px;"
                  suffix="张"
                  @blur="
                    () => {
                      $refs.pro_couponNum.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item ref="pro_couponSur" label="券剩余：" prop="pro_couponSur">
                <a-input
                  v-model="form.pro_couponSur"
                  placeholder="例：10000"
                  style="width: 126px;height: 30px;"
                  suffix="张"
                  @blur="
                    () => {
                      $refs.pro_couponSur.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item ref="pro_couponPrice" label="券后价：" prop="pro_couponPrice">
                <a-input
                  v-model="form.pro_couponPrice"
                  placeholder="金额"
                  style="width: 126px;height: 30px;"
                  suffix="元"
                  @blur="
                    () => {
                      $refs.pro_couponPrice.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item ref="pro_discount" label="折扣价：" prop="pro_discount">
                <a-input
                  v-model="form.pro_discount"
                  placeholder="金额"
                  style="width: 126px;height: 30px;"
                  suffix="元"
                  @blur="
                    () => {
                      $refs.pro_discount.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item label="佣金类型：" prop="pro_commType">
                <a-radio-group v-model="form.pro_commType">
                  <a-radio :value="1">
                    通用
                  </a-radio>
                  <a-radio :value="2">
                    营销
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
              <a-form-model-item ref="pro_commissionRate" label="佣金比例：" prop="pro_commissionRate">
                <a-input
                  v-model="form.pro_commissionRate"
                  placeholder="例：20.1"
                  style="width: 126px;height: 30px;"
                  suffix="%"
                  @blur="
                    () => {
                      $refs.pro_commissionRate.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item ref="pro_serviceRate" label="服务费率：" prop="pro_serviceRate">
                <a-input
                  v-model="form.pro_serviceRate"
                  placeholder="例：10"
                  style="width: 126px;height: 30px;"
                  suffix="%"
                  @blur="
                    () => {
                      $refs.pro_serviceRate.onFieldBlur();
                    }
                  "
                />
              </a-form-model-item>
              <a-form-model-item :wrapper-col="{ span: 10, offset: 2 }">
                <a-button
                  type="primary"
                  :disabled="btnloading"
                  @click="onSubmit"
                  class="br4"
                  style="width: 210px;height: 39px;">
                  <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
                  {{ btnloading===true?'提交中...':'提 交 录 入' }}
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>
<script>
  import moment from 'moment'
  import { docheckcoupon } from '@/api/enteringApi'
  import { dogoodstesting, doaddgoldrush } from '@/api/firstgiftsApi'

  export default {
    name: 'Entering',
    data () {
      return {
        moment,
        ischeck: false,
        btnloading: false,
        searchipt: '',
        labelCol: { span: 2 },
        wrapperCol: { span: 20 },
        form: {
          pro_beat: 1,
          pro_type: 7,
          pro_class: '',
          pro_shopName: '',
          pro_couponUrl: '',
          pro_actTime: '',
          pro_couponNum: '',
          pro_couponSur: '',
          pro_couponShold: '',
          pro_couponSingle: '',
          pro_couponPrice: '',
          pro_discount: '',
          pro_commType: 1,
          pro_commissionRate: '',
          pro_serviceRate: '',
          pro_url: '',
          pro_origSales: 0,
          pro_itemId: 0,
          pro_img: '',
          pro_exten: '',
          pro_title: '',
          pro_price: ''
        },
        rules: {
          pro_exten: [
            { required: true, message: '请输入商品短标题', trigger: 'blur' }
          ],
          pro_couponNum: [
            { required: true, message: '请输入优惠券总数', trigger: 'blur' }
          ],
          pro_serviceRate: [
            { required: true, message: '请输入服务费率', trigger: 'blur' }
          ],
          pro_commissionRate: [
            { required: true, message: '请输入佣金比例', trigger: 'blur' }
          ],
          pro_discount: [
            { required: true, message: '请输入折扣价', trigger: 'blur' }
          ],
          pro_couponPrice: [
            { required: true, message: '请输入券后价', trigger: 'blur' }
          ],
          pro_couponSur: [
            { required: true, message: '请输入优惠券剩余数量', trigger: 'blur' }
          ],
          pro_couponSingle: [
            { required: true, message: '请输入优惠券面值', trigger: 'blur' }
          ],
          pro_couponShold: [
            { required: true, message: '请输入优惠券使用门槛', trigger: 'blur' }
          ],
          pro_couponUrl: [
            { required: true, message: '请输入优惠券地址', trigger: 'blur' }
          ],
          pro_img: [
            { required: true, message: '请输入商品主图地址', trigger: 'blur' }
          ],
          pro_price: [
            { required: true, message: '请输入商品原价', trigger: 'blur' }
          ]
        },
        classlist: [
          {
            title: '吃遍全球'
          },
          {
            title: '衣服鞋帽'
          },
          {
            title: '美妆护肤'
          },
          {
            title: '生活用品'
          },
          {
            title: '家有萌宝'
          },
          {
            title: '生鲜果蔬'
          },
          {
            title: '其他品类'
          }
        ],
        endValue: null
      }
    },
    watch: {
      endValue (val) {
        console.log('endValue', val)
        this.form.pro_actTime = val.format('YYYY-MM-DD')
      },
      'form.pro_couponPrice': function (val) {
        console.log(val)
        this.form.pro_discount = parseFloat(val - 6)
      }
    },
    computed: {},
    created () {
    },
    mounted () {
    },
    methods: {
      docheckcoupon () {
        // https://detail.tmall.com/item.htm?id=631268690085
        // this.form.pro_couponUrl = 'https://uland.taobao.com/quan/detail?sellerId=2206777157658&activityId=c60970ba87d2455aa4a16193a94f0f44'
        if (this.form.pro_couponUrl !== '') {
          docheckcoupon({
            coupon_url: this.form.pro_couponUrl,
            item_id: this.form.pro_itemId
          }).then(res => {
            console.log('优惠券返回', res.data)
            this.form.pro_couponNum = res.data.couponnum // 优惠券数量
            this.form.pro_couponSur = res.data.couponsurplus // 优惠券剩余数量
            this.form.pro_couponSingle = res.data.money // 优惠券金额
            this.form.pro_couponShold = res.data.single_sum // 优惠券金额
            // this.form.pd_couponStartTime = moment(res.data.start_time * 1000).format('YYYY-MM-DD HH:mm:ss') // 优惠券开始时间
            this.form.pro_actTime = moment(res.data.end_time * 1000) // 结束时间
            // this.startValue = moment(res.data.start_time * 1000)
            this.endValue = moment(res.data.end_time * 1000)
            // console.log(this.form.pd_couponStartTime, this.form.pd_couponEndTime)
            this.form.pro_couponPrice = parseFloat(this.form.pro_price - res.data.money).toFixed(2)
          }).catch(err => {
            console.log(err)
          })
        }
      },
      closeimg () {
        this.form.pro_img = ''
      },
      getUrl (urlstr, name) {
        // console.log('urlstr', urlstr,'name',name);
        const i = urlstr.indexOf('?')
        // console.log('i', i)
        if (i !== -1) {
          urlstr = urlstr.slice(i, urlstr.length) // ?id=xxxxx&a=xxx
          var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
          var r = urlstr.substr(1).match(reg)
          if (r != null) {
            return unescape(r[2])
          } else {
            return null
          }
        } else {
          return urlstr
        }
        // 使用 let id = this.getUrl(this.value,'id');//tips: id是string
      },
      dogoodstesting () {
        // console.log(this.searchipt)
        if (this.searchipt !== '') {
          this.itemid = this.getUrl(this.searchipt, 'id')
          this.btnloading = true
          dogoodstesting({
            item_id: this.itemid
          }).then(res => {
            console.log('检测返回', res.data)
            if (res.code === 200) {
              this.form.pro_itemId = res.data.itemId
              this.form.pro_shopName = res.data.shopTitle
              this.form.pro_title = res.data.title
              this.form.pro_url = res.data.auctionUrl
              this.form.pro_img = res.data.pictUrl
              this.form.pro_price = res.data.zkFinalPrice
              this.form.pro_origSales = res.data.biz30day
              this.ischeck = true
              this.searchipt = ''
              this.btnloading = false
            } else {
              this.btnloading = false
              this.$message.error(res.msg)
            }
          }).catch(err => {
            console.log(err)
            this.$message.error(err.msg)
          })
        } else {
          this.$message.info('请先输入商品链接再检测!')
        }
      },
      handleChange3 (info) {
        console.log('info', info)
        if (info.file.response) {
          this.form.pd_superUrl = info.file.response.data.url
        }
      },
      handleChange2 (info) {
        console.log('info', info)
        if (info.file.response) {
          this.form.pro_img = '//' + info.file.response.data.url
        }
      },
      beforeUpload (file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$message.error('对不起,只支持jpg/png格式的图片!')
        }
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!isLt2M) {
          this.$message.error('对不起!图片大小超过5M!')
        }
        return isJpgOrPng && isLt2M
      },
      onChange (e) {
        console.log('radio checked', e.target.value)
        this.form.pro_img = e.target.value
      },
      onSubmit () {
        this.btnloading = true
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            console.log(this.form)
            doaddgoldrush(this.form).then(res => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success('提交成功!')
                this.resetForm()
                this.btnloading = false
                this.endValue = null
                this.ischeck = false
              } else {
                this.$message.error(res.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm () {
        this.$refs.ruleForm.resetFields()
      }
    }
  }
</script>
<style lang='less' scoped>
  .entering {
    .enterbox {
      .mainsearchbox {
        max-width: 484px;
        text-align: left;
        margin: 233px auto 391px;

        .topsearch {
          width: 100%;
          margin-bottom: 13px;
          font-size: 14px;
          color: #101010;
        }

        .tips {
          width: 484px;
          height: 174px;
          border: 1px solid rgba(255, 255, 255, 100);
          background-color: rgba(248, 248, 249, 100);
          border-radius: 4px;
          padding: 17px 23px 18px;
          margin-top: 23px;
        }
      }

      .enterform {
        padding: 17px 22px 39px;

        .formbox {
          .cartitle {
            color: #101010;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 19px;
          }

          /deep/ .ant-input {
            border-radius: 4px !important;
          }

          /deep/ .ant-select-selection {
            border-radius: 4px !important;
          }
        }

        .radiobox {
          /deep/ .ant-radio {
            display: none;
          }

          /deep/ .ant-radio-wrapper {
            margin-right: 67px;
            border: 1px solid transparent !important;
            padding: 2px;

            span {
              padding: 0;
              box-sizing: border-box !important;
            }
          }

          /deep/ .ant-radio-wrapper-checked {
            border: 1px solid #00A0E9 !important;
          }
        }

        .yximgbox {
          border: 1px solid rgb(232, 233, 234);
          width: 218px;
          height: 293px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          border-radius: 4px;
          position: relative;
          overflow: hidden;

          .huo {
            height: 20px;
            line-height: 20px;
            text-align: center;
            margin: 10px 0;
          }

          .routerlink {
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: #1890ff;
            cursor: pointer;
          }
        }

        .showimg {
          height: 20px;

          /deep/ .ant-upload {
            width: 56px;
            height: 20px;
            padding: 0px;
            margin: 0;
            border: none;
            background-color: transparent;
          }

          /deep/ .ant-btn {
            height: 20px;
          }
        }
      }
    }

    .yxtu {
      border: 1px solid #F0F1F4;
      padding: 2px;
      position: relative;

      .romoveimg {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 18px;
        font-weight: 600;
        color: red;
        display: none;
      }
    }

    .yxtu:hover {
      .romoveimg {
        display: block;
      }
    }

    .emoji_box {
      position: relative;

      #exampleInputEmoji {
        position: absolute;
        bottom: 9px;
        right: 1px;

        /deep/ .ant-btn:hover {
          background-color: #fff;
        }

        .vue_emoji {
          position: absolute;
          top: -143px;
          /*left: 66px;*/
          left: 107px;
          border: 1px solid #e8e8e8;

          /deep/ .emoji-controller {
            padding: 0;
          }

          /deep/ .emoji-container {
            // height: 135px!important;
            padding: 0;
          }

        }
      }
    }
  }
</style>
